<template>
  <BasicModal
    v-bind="$attrs"
    destroyOnClose
    :canFullscreen="false"
    @register="register"
    :title="topic"
  >
    <template #footer>
      <!-- <a-button type="primary" danger @click="setLines" :disabled="loading">点我更新内容</a-button> -->
    </template>
    <div class="mx-15px">
      <div v-if="isQuickLinks">
        <div class="flex items-center videoNull" v-for="item in lines" :key="item">
          <div
            class="flex border-1 rounded-lg border-gray-500/20 items-center pl-10px py-7px"
            style="flex: 4"
          >
            <div class="rounded-lg px-10px pt-7px pb-5px bg-blue-500/15">
              <AppstoreFilled class="text-xl" />
            </div>
            <div class="ml-15px">{{ QUICK_LINKS[item].label }}</div>
          </div>
          <div class="flex justify-between ml-15px" style="flex: 1.5">
            <DeleteFilled class="text-xl" @click="handleDelete(item)" />
          </div>
        </div>
      </div>
      <div v-else>
        <div class="flex items-center videoNull" v-for="item in lines" :key="item">
          <div
            class="flex border-1 rounded-lg border-gray-500/20 items-center pl-10px py-7px"
            style="flex: 4"
          >
            <div class="rounded-lg px-10px pt-7px pb-5px bg-blue-500/15">
              <AppstoreFilled class="text-xl" />
            </div>
            <div class="ml-15px">{{ item.name }}</div>
          </div>
          <div class="flex justify-between ml-15px" style="flex: 1.5">
            <DeleteFilled class="text-xl" @click="handleDelete(item)" />
          </div>
        </div>
      </div>
      <div
        v-show="!addIsshow"
        @click="addget"
        class="border-dashed border border-gray-500/50 rounded-lg flex items-center justify-center py-15px mt-15px cursor-pointer"
      >
        <PlusOutlined />
      </div>

      <div
        class="border-1 rounded-lg border-gray-500/20 items-center px-10px py-8px mt-15px"
        v-show="addIsshow"
        v-if="isQuickLinks"
      >
        <Select
          class="w-full"
          v-model:value="addValue"
          :options="Object.values(QUICK_LINKS)"
          placeholder="请选择快速链接"
        />
        <div class="flex justify-end mt-10px">
          <a-button
            type="link"
            class="ml-10px"
            @click="
              () => {
                addIsshow = false;
                addValue = '';
              }
            "
          >
            取消
          </a-button>
          <a-button type="primary" class="ml-10px" @click="handleAdd">添加</a-button>
        </div>
      </div>
      <div
        class="border-1 rounded-lg border-gray-500/20 items-center px-10px py-8px mt-15px"
        v-show="addIsshow"
        v-else
      >
        <div class="mb-4">
          <Input
            class="w-full mb-4"
            v-model:value="addFormValues.name"
            placeholder="请输入文档名称"
          />
        </div>
        <Input class="w-full" v-model:value="addFormValues.link" placeholder="请输入文档链接" />
        <div class="flex justify-end mt-10px">
          <a-button
            type="link"
            class="ml-10px"
            @click="
              () => {
                addIsshow = false;
                addValue = '';
              }
            "
          >
            取消
          </a-button>
          <a-button type="primary" class="ml-10px" @click="handleAdd">添加</a-button>
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { AppstoreFilled, DeleteFilled, PlusOutlined } from '@ant-design/icons-vue';
  import { Input, Select } from 'ant-design-vue';
  import { getQuickLinks } from './props';
  import { saveQuikLinks, saveDocLinks } from '/@/api/thingsborad/home/home';

  const emits = defineEmits(['links-change']);
  const QUICK_LINKS = getQuickLinks();
  const isQuickLinks = ref<boolean>(false);
  const topic = ref();
  const lines = ref<any[]>([]);
  const addIsshow = ref(false);
  const [register, { redoModalHeight }] = useModalInner((data) => {
    isQuickLinks.value = data.title === '快速链接';
    topic.value = data.title;
    lines.value = [...data.links];
  });
  const addValue = ref();
  const addFormValues = ref<Recordable>({
    name: '',
    link: '',
  });

  watch(
    () => lines.value,
    () => {
      redoModalHeight();
      emits('links-change', lines.value);
    },
    {
      deep: true,
    },
  );

  // 删除
  const handleDelete = async (item) => {
    if (isQuickLinks.value) {
      addIsshow.value = false;
      lines.value = lines.value.filter((e) => e !== item);
      await saveQuikLinks({ links: [...lines.value] });
      addValue.value = '';
    } else {
      addIsshow.value = false;
      lines.value = lines.value.filter((e) => JSON.stringify(e) !== JSON.stringify(item));
      await saveDocLinks({ links: [...lines.value] });
      addValue.value = '';
    }
  };

  // 新增
  const handleAdd = async () => {
    if (isQuickLinks.value) {
      await saveQuikLinks({ links: [...lines.value, addValue.value] });
      addIsshow.value = false;
      lines.value.push(addValue.value);
      addValue.value = '';
    } else {
      await saveDocLinks({ links: [...lines.value, addFormValues.value] });
      addIsshow.value = false;
      lines.value.push(addFormValues.value);
      addFormValues.value = {
        name: '',
        link: '',
      };
    }
  };

  function addget() {
    addIsshow.value = !addIsshow.value;
  }
</script>

<style scoped>
  .empty-tips {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
</style>
